<template>
  <div class="workorder-list-container">
    <div class="workorder-header">
      <el-button @click="goBack" type="default" icon="ArrowLeft">返回</el-button>
      <div class="workorder-list-title">我的维修工单</div>
    </div>
    <el-table :data="workorderList" style="width: 100%">
      <el-table-column prop="id" label="工单编号" width="100"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称"></el-table-column>
      <el-table-column prop="faultDescription" label="故障描述"></el-table-column>
      <el-table-column prop="status" label="工单状态" width="120">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
      <el-table-column prop="repairmanName" label="维修人员" width="120"></el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
          <el-button v-if="scope.row.status === 'completed'" size="small" type="primary" @click="evaluateWorkorder(scope.row)">评价</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import service from '~/axios';
import { toast } from '~/composables/util';
import { getToken } from '~/composables/auth';
import { ArrowLeft } from '@element-plus/icons-vue';

const router = useRouter();
const workorderList = ref([]);

onMounted(() => {
  fetchWorkorders();
});

const fetchWorkorders = async () => {
  if (!getToken()) {
    toast('请先登录', 'warning');
    router.push('/login');
    return;
  }

  try {
    // 假设用户ID为1，实际应从登录信息获取
    const res = await service.get('/api/user/GetAllOrderByUserId', {
      params: {
        user_id: 1
      },
      headers: {
        'Authorization': `Bearer ${getToken()}`
      }
    });
    workorderList.value = res;
  } catch (error) {
    toast('获取工单列表失败，请稍后重试', 'error');
  }
};

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'cancelled': '已取消'
  };
  return statusMap[status] || status;
};

const getStatusTagType = (status) => {
  const typeMap = {
    'pending': 'info',
    'processing': 'warning',
    'completed': 'success',
    'cancelled': 'danger'
  };
  return typeMap[status] || 'default';
};

const viewDetails = (row) => {
  router.push({ path: '/workorder-detail', query: { id: row.id } });
};

const evaluateWorkorder = (row) => {
  router.push({ path: '/workorder-evaluate', query: { id: row.id } });
};

const goBack = () => {
  router.back();
};
</script>

<style scoped>
.workorder-list-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.workorder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.workorder-list-title {
  font-size: 24px;
  color: #333;
}
</style>